<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="box1">
        <div class="content">
            <ul class="clear">
                <div id="one" width='100'>水电费</div>
                <div id="two" width='200'>消息称</div>
                <div id="three" width='300px'>从VB你</div>
                <li>
                    <span>嘻嘻哈哈</span>
                </li>
                <li class="uu1">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li class="lol">6</li>
            </ul>
            <div id="bottom">
                <div id="left">
                    <div id="right" class="jj">
                        <input type="text" name="myname" value="" placeholder="">
                        <input type="password" name="ee" value="" placeholder="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function(){
            // 筛选
            $('li').first().css('background','yellow')
            $('li').last().css('background','lightblue')

            // hasClass
            console.log($('div').hasClass('jj'))

            // is  有一个就行
            console.log($('div').is('.jj','.bb'))

            // map
            console.log($('li').eq(2).map(function(){
                return $(this).text()
            }))

            // 查找
            $('#bottom').children().css('background','lightpink')
            $('#bottom').parent().css('border','10px solid lightgreen')
        })
    </script>
</body>
</html>